<template>
    <div>
        <div v-title>分期付款计划</div>
        <div class="main">
            <div v-for="item in datalist">
                <div class="one">
                    <span>
                        <span v-show="item.PeriodsCount<10">0</span>{{item.PeriodsCount}}/
                        <span v-show="item.PeriodsNumber<10">0</span>{{item.PeriodsNumber}}期</span>
                    <span style="float:right">
                        <span style="font-weight: bold;">{{item.OrderAmount}}</span>(含手续费:{{item.ServiceCharge}})</span>
                </div>
                <div class="two">
                    <span v-if="item.IsPay=='0'" style="color:#666666">{{item.PayName}}</span>
                    <span v-else>{{item.PayName}}</span>
                    <span style="float:right">{{item.LastTime.split(' ')[0]}}</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import api from '../fetch/api.js'
export default {
    data() {
        return {
            datalist: '',
        }
    },
    mounted() {
        this.OGetListPage()
    },
    methods: {
        OGetListPage() {
            api.OGetListPage({ PolicyID: this.$route.params.id,IsPay:-1 }).then(res => {
                this.datalist = res
            })
        },
    }
}

</script>
<style scoped>
.main {
    background: #fff;
}

.main>div {
    width: 90%;
    margin: 0px auto;
    border-bottom: 1px solid #eeeeee;
    overflow: hidden;
    padding: 8px;
}

.one {
    color: #333333;
    font-size: 14px;
    line-height: 24px;
    overflow: hidden;
}

.two {
    color: #999999;
    font-size: 12px;
    line-height: 24px;
    overflow: hidden;
}
</style>
